Usabilidad Temari

16 de febrer del 2010
Usabilidad en la Web
1.- Información general.

2.- Elementos de un buen site

3.- Principios generales de usabilidad en sitios web

4.- Qué es la Interacción Persona-Ordenador

5.- Sobre buscadores internos

6.-Formularios

7.-Selección Múltiple

8.-Cabeceras de Portal

9.- Los Usuarios

10.-Los colores y las hojas de estilo

11.-B2B

12.-Enlaces en nuestras Páginas.

13.- Navegadores usables.

14.- Peso del site.

15.-Páginas fluidas.

16.-Página de error.

17.-Los banners.

18.-Los enlaces

19.-Los Iframes.

20.-El log de visitas.

21.-Pedir información al usuario.

22.-Colocar un buscador gratuito.

23.-Evaluar la usabilidad.

24.-Páginas sencillas.

25.-Organizar la información para webs.

26.-Hojas de estilo CSS

27.-Uso de icono en el diseño de interfaces.

28.-Poner el Flash dentro de una estructura web.

29.-Los menús de la web.

30.-Guía de estilo normalización.

31.-Usabilidad y analítica web.

32.-Normas para maximizar la usabilidad.
(Referencia del Manual de César Martín desarrolloWeb)


1.- Que es la usabilidad?

Técnicas que ayudan a los seres humanos a realizar tareas en entornos gráficos de ordenador.
3 conceptos muy importantes. Trabajamos para seres humanos, que quieren realizar una tarea de
una forma sencilla y eficaz y en este caso particular, la deben realizar frente a un ordenador en un
entorno grafico, la web. La usabilidad ayuda a que esta tarea se realicé de una forma sencilla
analizando el comportamiento humano, y los pasos necesarios para ejecutar la tarea de una forma
eficaz. Quizás suene un poco a trabajo industrial, pero al hacer referencia al termino "tarea",
estamos haciendo referencia a buscar un programa que queremos ver en la tele, a ver información
sobre mi equipo de futbol favorito, a comprar un libro sobre artes marciales.

Realmente hace falta la usabilidad para hacer una web?
Si. Sea tu web un portal o una pagina personal, no olvides que la gente que entra en tu web es por
que básicamente busca algo. Hacerlo sencillo es decisión tuya, pero seguro que entre todos
podemos hacer de Internet un sitio mejor donde la gente no se sienta perdida o extraviada o
sencillamente defraudada.

Donde puedo encontrar mas información sobre este tema?
Hay miles de direcciones que hablan sobre usabilidad en Internet. Al final de este pequeño manual
encontraras enlaces de interés con una selección de paginas que te ayudarán a formarme y a
estudiar sobre este tema.

Cuales son las 8 reglas de Oro sobre la usabilidad?

1. En Internet el usuario es el que manda.

o Esto quiere decir que sin usuarios tu pagina muere, así que mas te vale que los
cuides y les des lo que te piden, de lo contrario te quedaras solo.

2. En Internet la calidad se basa en la rapidez y la fiabilidad.
o En Internet cuenta que tu pagina sea mas rápida que bonita, fiable que moderna,
sencilla que compleja, directa.

3. Seguridad.
o Si en el mundo real a veces nos cuesta fiarnos del banco de la esquina, imagínate
como se siente la gente en Internet cuando llega a tu site. Procura que todo funcione
como un reloj para que la gente pueda fiarse de tu site.

4. La confianza es algo que cuesta mucho ganar y se pierde con un mal enlace.
o Esto quiere decir que tal y como esta la competencia en Internet, no puedes perder
ni un solo visitante por tener un enlace mal hecho. Es mejor salir con algo sencillo e
irlo complicando poco a poco, que salir con todo y ver "que es lo que pasa".
Versiones 1.0 son buenas mientras lo que este puesto este bien asentado y genere
confianza. Poco a poco y con el feedback de los usuarios, podrás ir complicando la
pagina. Pero asegura antes de arriesgar.

5. Si quieres hacer una pagina decente, simplifica, reduce, optimiza.
o La gente no se va a aprender tu site por mucho que insistas, así que por lo menos
hazlo sencillo, reutiliza todos los elementos que puedas, para que de este modo los
usuarios se sientan cómodos y no se pierdan cada vez que necesiten encontrar algo
en tu site.

6. Pon las conclusiones al principio.

o El usuario se sentirá mas cómodo si ve las metas al principio. De esta forma no
tendrá que buscar lo que necesita y perderá menos tiempo en completar su tarea. Si
completa su tarea en menos tiempo se sentirá cómodo y quizás se dedique a
explorar tu site o quizás se lo recomiende a un amigo.

7. No hagas perder el tiempo a la gente con cosas que no necesitan.
o Cuidado con cruzar promociones, si lo haces por lo menos hazlo con cuidado.
Procura que la selección de productos a cruzar sea consecuente y no lo quieras
"vender todo" en todas las paginas. Según avance el usuario en su navegación
procura dejarle mas espacio libre. Puede ocurrir que cuando este punto de comprar
algo vea una oferta que le distraiga y pierdas esa venta.

8. Buenos contenidos.
o Escribir bien para internet es todo un arte. Pero siguiendo las reglas básicas de (1)
poner las conclusiones al principio y (2) escribir como un 25% de lo que pondrías en
un papel, se puede llegar muy lejos. Leer en pantalla cuesta mucho, por lo que, en
el caso de textos para internet, reduce y simplifica todo lo que puedas.

C tiempo me va a llevar hacer esto?
Un desarrollo web, de media, lleva 6 meses - 1 año. Lo demás son tonterías. Así que si tu busineess
plan depende de un "dead line" para mañana, revísalo.

 Guía básica sobre los elementos que componen un buen sitio web y cómo
conseguirlo.
 Primero pasos.

• Disponer de tiempo, tecnología y recursos humanos para llevar a cabo el proyecto.
• Que todos los departamentos de la compañía se sientan integrados en el proyecto.
• Qué vas a "vender": entiéndase vender como promocionar, anunciar, o vender directamente
productos.
• A quién se lo vas a "vender": debemos identificar a nuestro núcleo de usuarios extremos que
nos ayudaran a posicionar el producto de una forma mas definida que si nos dirigimos
directamente a la gran audiencia.
• Cómo se lo vas a "vender": aquí es donde entran los temas de logística, atención al cliente,
diseño de producto y web.
• Una vez vendido, qué hacemos: es importante preveer que pasara mañana cuando nuestros
clientes nos hayan comprado los productos. Fidelización, promociones, seguimiento...

 El primer prototipo.

• Con todos los requisitos recogidos en los primeros pasos, podremos empezar a pensar en
como vamos a construir nuestro site.
• Se recomienda que el equipo que este en esta fase sea multidisciplinar (como mínimo,
programación, diseño, contenidos y un coordinador de equipo).
• Se recomienda que el coordinador sepa algo de todas las materias, (servidor, web, diseño,
contenidos) por que será la persona encargada de crear puentes entre los diferentes
departamentos y de llegar a consensos cuando surjan problemas de competencia.
• Con este equipo se llevara a cabo una maqueta que servirá para aproximarnos a la idea de
nuestro site.
• Esta maqueta será producida a un nivel casi real para que sea probada por los usuarios.

 Test de usuario.

• Una vez producido el prototipo, se hará nuestro primer test de usuario.
• El test de usuario nos ayudara a enriquecer el producto observando el comportamiento del
usuario, viendo las virtudes de nuestro producto y sobre todo aquellos puntos débiles que
pueda presentar.
• Con el test de usuario se realizara un nuevo prototipo que se debería volver a testear
mientras sea posible.

 Lanzamiento.

• Una vez tenemos un prototipo ajustado queda la parte de realización técnica.
• Se deberá disponer del tiempo disponible para ajustar el prototipo a la realidad, pero no se
deben encontrar nuevos obstáculos en esta fase.
• Para evitar estos nuevos obstáculos, es necesario la total transparencia de los
departamentos a la hora de realizar el prototipo, es decir, conocer toda las posibilidades
existentes dentro de la operativa, ver el "peor de los casos existentes", ver como funciona "el
primer día", etc...
• Por ultimo se recomienda pasar una fase de "emisión en pruebas", es decir, lanzar el site y
probarlo en real (conexiones con modem, operativa real, ver respuesta del correo o del call
center en caso de que existan, etc..)

El diseño de sitios web deben seguir los siguientes principios:

1. Anticipación, el sitio web debe anticiparse a las necesidades del usuario.

2. Autonomía, los usuarios deben tener el control sobre el sitio web. Los usuarios sienten que
controlan un sitio web si conocen su situación en un entorno abarcable y no infinito.

3. Los colores han de utilizarse con precaución para no dificultar el acceso a los usuarios con
problemas de distinción de colores (aprox. un 15% del total).

4. Consistencia, las aplicaciones deben ser consistentes con las expectativas de los usuarios, es
decir, con su aprendizaje previo.

5. Eficiencia del usuario, los sitios web se deben centrar en la productividad del usuario, no en la del
propio sitio web. Por ejemplo, en ocasiones tareas con mayor número de pasos son más rápidas de
realizar para una persona que otras tareas con menos pasos, pero más complejas.

6. Reversibilidad, un sitio web ha de permitir deshacer las acciones realizadas

7. Ley de Fitts indica que el tiempo para alcanzar un objetivo con el ratón esta en función de la
distancia y el tamaño del objetivo. A menor distancia y mayor tamaño más facilidad para usar un
mecanismo de interacción.

8. Reducción del tiempo de latencia. Hace posible optimizar el tiempo de espera del usuario,
permitiendo la realización de otras tareas mientras se completa la previa e informando al usuario del
tiempo pendiente para la finalización de la tarea.

9. Aprendizaje, los sitios web deben requerir un mínimo proceso de aprendizaje y deben poder ser
utilizados desde el primer momento.

10. El uso adecuado de metáforas facilita el aprendizaje de un sitio web, pero un uso inadecuado de
estas puede dificultar enormemente el aprendizaje.

11. La protección del trabajo de los usuarios es prioritario, se debe asegurar que los usuarios nunca
pierden su trabajo como consecuencia de un error.

12. Legibilidad, el color de los textos debe contrastar con el del fondo, y el tamaño de fuente debe
ser suficientemente grande.

13. Seguimiento de las acciones del usuario. Conociendo y almacenando información sobre su
comportamiento previo se ha de permitir al usuario realizar operaciones frecuentes de manera más
rápida.

14. Interfaz visible. Se deben evitar elementos invisibles de navegación que han de ser inferidos por
los usuarios, menús desplegables, indicaciones ocultas, etc.

Otros principios para el diseño de sitios web son:

a) Los usuarios deben ser capaces de alcanzar sus objetivos con un mínimo esfuerzo y unos
resultados máximos.

b) Un sitio web no ha de tratar al usuario de manera hostil. Cuando el usuario comete un error el
sistema ha de solucionar el problema, o en su defecto sugerir varias soluciones posibles, pero no
emitir respuestas que meramente informen del error culpando al usuario.

c) En ningún caso un sitio web puede venirse abajo o producir un resultado inesperado. Por ejemplo

no deben existir enlaces rotos.

d) Un sitio web debe ajustarse a los usuarios. La libertad en el uso de un sitio web es un término
peligroso, cuanto mayor sea el número de acciones que un usuario pueda realizar, mayor es la
probabilidad que cometa un error. Limitando el número de acciones al público objetivo se facilita el
uso de un sitio web.

e) Los usuarios no deben sufrir sobrecarga de información. Cuando un usuario visita un sitio web y
no sabe donde comenzar a leer, existe sobrecarga de información.

f) Un sitio web debe ser consistente en todos los pasos del proceso. Aunque pueda parecer
apropiado que diferentes áreas tengan diseños diferentes, la consistencia entre los diseños facilita al
usuario el uso de un sitio.

g) Un sitio web debe proveer de un feedback a los usuarios, de manera que éstos siempre conozcan
y comprendan lo que sucede en todos los pasos del proceso.

4.- Interacción Persona-Ordenador
La Interacción Persona-Ordenador, es la disciplina que estudia el intercambio de información entre
las personas y los ordenadores. Su objetivo es que este intercambio sea más eficiente: minimiza los
errores, incrementa la satisfacción...

La investigación en IPO/HCI lleva a la estandarización de la usabilidad, su mejora y apoyo empírico.
El enfoque científico de la IPO/HCI incluye una variedad de herramientas y técnicas que ayudan a
desarrollar mejores interfaces de usuario.

Nota: La Interacción Persona Ordenador es más conocida por su nombre en inglés, Human-
Computer Interacción y sus siglas HCI (en lo sucesivo utilizaremos las siglas IPO/HCI)

Breve historia

Los orígenes de la IPO/HCI hay que buscarlas en la rama de la Psicología Aplicada que estudia la
Interacción Persona-Ordenador. Las dos disciplinas de las que surge la IPO/HCI son las llamadas
"Human Factors" y la Ergonomía (en realidad es la misma disciplina, el primer termino se utiliza en
EE.UU y el segundo en Europa). Actualmente el uso de estos términos no esta claramente
establecido y incluso a veces se utilizan de manera indistinta.

El predominio tradicional en la IPO/HCI ha sido de los ingenieros, aunque la influencia de la
psicología es creciente. La Psicología es la disciplina que estudia la percepción, la memoria, la
adquisición de habilidades y el aprendizaje, la resolución de problemas, el movimiento, las tareas de
juicio, de búsqueda o procesamiento de información y de la comunicación, es decir, procesos todos
cuyo conocimiento se requiere para el adecuado diseño de mecanismos de interacción del usuario.
Aunque la Psicología Cognitiva es una ciencia muy joven en lo que respecta a investigaciones de
carácter básico y sistemático, existen actualmente suficientes hallazgos basados en resultados
empíricos que permiten el desarrollo de la IPO/HCI y, por ende, de sitios web adaptados a los
usuarios.

La IPO/HCI es también una disciplina joven, pero no tanto como pudiera parecer. Desde el primer
ordenador ha sido necesario el diseño de un sistema de comunicación persona-ordenador. Los
estudios en esta disciplina han permitido dar una base teórica al diseño y a la evaluación de
aplicaciones informáticas. La importancia de esta disciplina se pone sobre relieve al leer artículos
sobre el tema escritos hace cuarenta años en los que se predecían elementos de interacción de los
que se dispone actualmente. Una de las asociaciones más influyentes en este campo es la ACM
SIGCHI (Association for Computing Machinery's Special Interest Group on Computer-Human
Interaction) que desde 1982 reune a los mejores especialistas en IPO/HCI.

Los primeros estudios específicos de IPO/HCI aparecieron en los años sesenta y se referían a la
simbiosis Persona-Ordenador (Licklider, 1960). Este autor afirmó anticipándose a la problemática
posterior que el problema de la interacción hombre-ordenador no es crear ordenadores productores
de respuestas, sino ordenadores que sean capaces de anticipar y participar en la formulación de las
preguntas.

Licklider y Clark (1962) elaboraron una lista de 10 problemas que deberían ser resueltos para
facilitar la interacción personas-ordenador. Según el los cinco primeros problemas deberían ser
resueltos de manera inmediata, el sexto en un tiempo intermedio y los cuatro últimos, a largo plazo:

1. Compartir el tiempo de uso de los ordenadores entre muchos usuarios.
2. Un sistema de entrada-salida para la comunicación mediante datos simbólicos y gráficos.
3. Un sistema interactivo de proceso de las operaciones en tiempo real.
4. Sistemas para el almacenamiento masivo de información que permitan su rápida recuperación.
5. Sistemas que faciliten la cooperación entre personas en el diseño y programación de grandes
sistemas.

6. Reconocimiento por parte de los ordenadores de la voz, de la escritura manual impresa y de la
introducción de datos a partir de escritura manual directa.
7. Comprensión del lenguaje natural, sintáctica y semánticamente.
8. Reconocimiento de la voz de varios usuarios por el ordenador.
9. Descubrimiento, desarrollo y simplificación de una teoría de algoritmos.
10. Programación heurística o a través de principios generales.

El tiempo ha demostrado que Licklider y Clark estaban en lo cierto en la mayoría de sus
observaciones, sin embargo, actualmente aún no se han conseguido solucionar algunos de los
problemas previstos para su resolución a largo plazo.

Hansen (1971) en su libro "User Engineering Principles for Interactive Systems" hace la primera
enumeración de principios para el diseño de sistemas interactivos:

1. Conocer al usuario
2. Minimizar la memorización, sustituyendo la entrada de datos por la selección de ítems, usando
nombres en lugar de números, asegurándose un comportamiento predecible y proveyendo acceso
rápido a información práctica del sistema.
3. Optimizar las operaciones mediante la rápida ejecución de operaciones comunes, la consistencia
de la interfaz y organizando y reorganizando la estructura de la información basándose en la
observación del uso del sistema.
4. Facilitar buenos mensajes de error, crear diseños que eviten los errores más comunes, haciendo
posible deshacer acciones realizadas y garantizar la integridad del sistema en caso de un fallo de
software o hardware.

A pesar de la obviedad y antigüedad de estos principios es fácil encontrar en sitios web de comercio
electrónico códigos inmemorizables para identificar productos, mensajes de error ininteligibles y, en
general, un maltrato constante al usuario.

5.-Buscadores internos
Para tener un buscador debes guardar todo lo que hagas. Procura que cada artículo, fichero,
producto tenga una página con entidad propia. Jamás borres una página. Puede ser que alguien la
esté enlazando desde otra página, o puede ser que alguien la esté buscando. 2. Indexa todo el site y
deja que los usuarios busquen en todo tu archivo. 3. Ofrece resultados ordenados e identifica
palabras clave (keywords) para facilitar la búsqueda.

Buscadores gratuitos para tu site sin necesidad de saber programación

• Bravenet.com De lo mejor que vas a encontrar. Un site para explorar.
• SpaceSurfer.com Mini.
• Google
• Fusion Bot
• sitelevel.com
• FreeFind.com

Este listado de sites ofrecen código listo para copiar y pegar en tu site de tal forma que los usuarios
puedan buscar dentro de las páginas de tu site.

Aspectos específicos de cada site pueden alterar la calidad de los resultados.

En este artículo no se habla de código PHP

En los comentarios todo el mundo se queja de que este artículo no ofrece código para programar un
buscador.

Esa no era la idea original del mismo. La idea era hablar sobre como "planear y crear un buen
buscador". El código del buscador sin un buen sistema de páginas para indexar no sirve de nada.

Si quieres código para crear un buscador, utiliza estos enlaces.

Este artículo pretende hablar sobre como diseñar, no programar un buscador.

Código PHP para crear un buscador interno

• Zoom
• Mnogo
• Más en google Php free search engine
• HTML POINT
Originalmente publicado en Noviembre de 2000

1. Crea archivos. Guarda todo lo que hagas.

Cuando hagas tu página ten en mente la forma de almacenar los archivos. Procura que cada
"elemento" tenga su "entidad".
Definamos "elemento" como cada artículo, ficha de producto, gráfico que tenga interés para los
usuarios en tu site.
Cada uno de estos elementos tendrá una página con un nombre, una ubicación y un orden dentro de
la jerarquía de tu site.
Este elemento por tanto estará correctamente identificado para acceder a el en cualquier momento.

Nota: Si tu site genera páginas en tiempo real, lo ideal seria guardar el sumario del día. Por ejemplo
en un broker, donde la información bursátil genera páginas diferentes a cada refresco de
información, seria interesante guardar una ficha por empresa y día, con la información del cierre,

máximos, mínimos, generando un archivo interesante para la consulta.

2. Dejemos que el usuario busque todo lo que quiera.

Lo que tiene sentido en un buscador es que se pueda buscar todo. Es decir, si entro en un periódico,
y pongo "Aznar", lo que quiero es ver todas las noticias que hay sobre Aznar desde que nació. Eso
me da libertad y me muestra la potencia de la página.
Buscar en los archivos y ver que el sistema responde, da al usuario muestras de que esta delante de
un sitio donde puede pasar horas y horas mirando información relevante. Si empezamos a limitar la
búsqueda (solo este mes, solo este numero, solo en este sitio) empezamos a hacerlo mal y puede
ser que el usuario se muestre frustrado. También ocurre que el numero de resultados validos
disminuye con lo que perdemos calidad en la búsqueda.

3. Ofrece resultados ordenados

Así como demostrar la potencia de la maquina con un buen buscador esta bien, también es
reconfortante demostrar inteligencia. Para ello debemos identificar palabras clave "relevantes" en
nuestro site. Esta identificación nos servirá de atajos para evitar mostrar información redundante al
usuario. Siguiendo con el ejemplo del periódico. Si entro en el periódico y pongo El nombre de un
político, lo ideal seria mostrar un enlace a la típica ficha oficial y luego todos los resultados
relevantes en nuestro site.
Esta "inteligencia" requiere identificar todos los elementos que creamos que son relevantes para el
usuario y hacerlo de forma mas o menos humana. Siguiendo con el ejemplo del periódico, palabras
como "presidente", "el apellido", "Nombre completo", nos llevarían a resultado similares. Donde lo
ideal seria ver una serie de "fichas" que concuerdan con el termino buscado, y una serie de
resultados provenientes de la base de datos.

Photodisc.com es uno de los sitios mejor organizados. No solo busca por "keywords" si no que una
vez encontrada la foto vemos una serie de keywords relacionados con esta. Estos keywords están
enlazados de tal forma que puedo seguir buscando por keywords nuevamente hasta afinar los
resultados. Básicamente lo que ofrece es una sensación de "control" que muchas veces se hecha de
menos.

Mas o menos con este sistema de "palabra clave" y búsqueda "brutal" podremos ofrecer al usuario
un arma útil para navegar por nuestro site.

4. Lo que ocurre en el mundo real es mas o menos lo siguiente.

Gente que lo hace muy bien.
Tenemos 3 ejemplos básicos que no son buscadores y uno de ellos es de España:

• The New York Times. Este periódico ofrece un buscador, quizás algo pequeño pero muy
efectivo. Presenta dos opciones de búsqueda, bajo la forma de "radio button", que son
buscar en la edición de hoy o buscar en los archivos. Los archivos son de pago con lo que
han conseguido que el buscador sea una herramienta de venta. En los archivos
básicamente lo puedes encontrar todo. En el buscador del día también. Es impresionante.
• ESPN.com es un sitio de deportes que tiene un buscador muy bueno. En la parte superior
tenemos un combo con 3 opciones muy claras, "keywords", "buscar en todo el site" o buscar
en internet. No hay lugar a dudas. Luego tenemos el campo de texto y el botón de buscar.
Todo correcto. El caso de buscar por keywords, es clave, si pongo NFL, no quiero ver todos
los artículos que contienen la palabra NFL, quiero ver la página que le dedicas a esto. En el
caso de sitios de comercio electrónico, si pongo pantalones, no quiero que me saques todas
las páginas que pone pantalones, quiero que me lleves a la sección/es donde vendes
pantalones.
• La gente del Marca.es lo hacen muy bien. Quizás el buscador este algo escondido, pero
funciona muy bien. Aquí tienes un ejemplo de los resultados que ofrecen.

• Lo que hacen en España los periódicos.

En los periódicos puede ser donde un buscador sea la herramienta mas utilizada después
de los portales. El archivo que generan y la flexibilidad de Internet les proporcionan un valor
incalculable. Veamos que es lo que hacen.
Aquí verás comentados el ABC, El Mundo, El País y la Vanguardia. Ninguno lo hace muy
bien, pero el que mejor lo hace es el Mundo.

Como se presenta el buscador en la portada:
• El ABC: Presenta un buscador en la portada, pero se les olvido poner el botón de "buscar".
• El Mundo: Presenta un buscador interno al final de la página de portada. Demasiado
escondido.
• El País: Presenta la búsqueda como una opción por lo que debemos irnos a otra página
para poder buscar.
• La Vanguardia: Presenta un buscador en portada pero es algo complejo de manejar.
También se les olvido poner el botón de buscar.
• Lo ideal seria el formato del buscador del Mundo pero arriba del todo.
Podemos buscar en "todo" el site:

• El ABC: Si, pero palabras como "televisión", "tabaco", "perro" dan resultados nulos. Me
parece que solo busca en la edición del día. . Esta pantalla salió al buscar fútbol dentro del
buscador del ABC.
• El Mundo: Deja acceso por meses.
• El País: Deja acceso por días.
• La Vanguardia: Presenta la opción de "diario de hoy", "6 meses" (por que no 12, o 24?),
"resto de la web" (que web?, internet?, tu web?, mi web?, que es el resto?, lo que sobra?).
• Lo ideal seria poder buscar en "todo" el archivo. Ninguno permite esta opción.

Como vemos los resultados:

• El ABC: Básicamente falla mucho.
• El Mundo: Quizás el mejor de los 4. Presenta resultados ordenados por relevancia y
disponemos del buscador en la misma página, por lo que no tenemos que volver al buscador
para hacer una nueva búsqueda. Esto es básico, pero muchas veces se olvida.
• El País: Bastante mal. No esta bien hecho ni el tema de titular las páginas por lo que
muchas veces los resultados sales vacíos. Luego no tenemos el buscador en esta página
por lo que tenemos que volver al buscador para hacer una nueva búsqueda.
• La Vanguardia: No esta mal, pero el buscador es algo complejo de manejar ya que es el
combo el que "lanza" la búsqueda.
• Lo ideal es lo que hace el Mundo. Los ordena por relevancia, indicando la fecha, peso y el
titular del artículo. Excelente.

6.-Formularios
Resumen:
1. Procura reducir al máximo el numero de campos.
2. Evita los combos.
3. Es mejor si la información no se fragmenta demasiado.

1. Reduce al máximo el numero de campos en los formularios
Si en Internet siempre estamos hablando de menos es mas, cuando hablamos de formularios,
menos es mucho... debemos tender a cero.

A. Procura reutilizar campos:
Por ejemplo:
Correo electrónico = nombre de usuario.
DNI = password.
B. Evita formalidades
Ejemplos de campos que no son realmente necesarios:
Tratamiento (Don, Sr., Sra.,)
Tipo de Vía (Calle, Camino, ...)
Fecha de nacimiento (es esto realmente necesario?, si lo es, indica para que lo estas
pidiendo)

2. Evita el uso de los combos en los formularios.
1. Es mas rápido escribir que seleccionar la opción en el combo.
2. La pagina pesa menos. El usuario se la baja mas rápido y acaba antes el proceso.

En la mayoría de los casos es mas rápido escribir el texto que buscarlo en un combo.
Escribir la palabra "España" puede llevar entre 1 y 2 segundos mas o menos, elegirla en un combo
donde podemos encontrar todos los países del mundo puede llevar un promedio de 4 y 6 segundos.
Si usamos el truco de preseleccionar el país en el combo, también podemos pre-escribir la palabra
en el campo de texto.

El único caso en el que el uso de combos esta justificado es en aquellos en los que la respuesta esta
predefinida tipo rangos, valoraciones subjetivas, marcas, etc... pero no lo uses para países,
provincias, números, etc...

3. Evitar fragmentar la información.
El caso mas típico es el de la dirección donde por lo general se pinta así:
Tipo de vía:, Dirección:, Numero:, Código postal:...
Este caso a su vez suele estar alimentado con varios combos, con lo que el usuario debe leer cada
campo, entender lo que le están pidiendo y rellenarlo...
Podemos simplificarlo usando una única línea donde el usuario escriba toda la dirección, como si se
tratase de una carta.
Dirección completa: Calle Martínez Izquierdo N23, 7h.
Código postal: 12002.
De esta forma solo tenemos una línea para el campo "dirección", y luego 3 mas para indicar código
postal, población y provincia.
El usuario se sentirá mas cómodo si puede poner lo que quiera y no le obligamos a rellenar cosas
prefijadas que a lo mejor no entiende o no se ajusta a su caso particular.

Luego quizás quede destacar el caso de algunos bancos donde el campo "profesión" obliga al
usuario a elegir una opción de la lista que el banco dispone, haciendo uso de un buscador, códigos
de profesión, etc, etc... Realmente no es recomendable. El beneficio que pueda dar esta información
frente al engorro que produce al usuario no tiene equivalencia.

Con estos breves consejos podemos pasar de un formulario con 16 campos a 8 y disminuir el peso
de la pagina a la mitad.

Resumen
Reducir, reciclar, reutilizar.

7.-Selección Múltiple
Hay casos en los que los combos se utilizan para "ahorrar operativa al usuario"...
Veamos un ejemplo: Queremos comparar dos coches en la web de Supermotor

Que se les ocurrió, elijo la marca en un combo y se supone que "adivino" que en el combo de al lado
se recargan los modelos:

 Elijo la Marca A y el Modelo A (se recarga la pagina sin que yo lo indique)
 Elijo la Marca B y el modelo B (se recarga la pagina otra vez sin que yo lo indique)
 Y ahora es cuando puedo comparar.

 RECUERDA: El usuario es el que tiene el control... no la maquina... NUNCA se deben ejecutar
operaciones sin que el usuario lo haya ordenado. Entendemos que recargar la pagina es ejecutar
una orden que el usuario ordena... nunca la debemos hacer si su permiso.
Que ahorro hemos conseguido? Solo hemos conseguido que el usuario se vea recargando la pagina
una y otra vez...

Cual hubiera sido el modelo correcto (pensando en que hay usuarios no acostumbrados a Internet y
que no todos somos unos genios...):

 Presentamos una pagina donde se indica con claridad que es lo que tiene que hacer el usuario.

1 de 3: Elija las 2 marcas de coches a comparar: (lo mejor seria hacer la selección con radio button
por columna de marcas)
MARCA 1 MARCA 2
marca 1 marca 1
marca 2 marca 2
marca 3 marca 3
.... ....
Siguiente: (enlace a la siguiente pagina) Seleccionar modelo dentro de las marcas escogidas.

En este punto es bueno recordar que siempre debemos indicar el estatus del usuario (paso 1 de 3,
siguiente operación, etc...), recuerde que siempre es el usuario el que tiene el control, para poder
tener el control es necesario estar informado de donde vengo, a donde voy, que puedo hacer entre
medias, que ocurre si pincho aquí...)

2 de 3: Elija los 2 modelos de coches a comparar: (hacer la selección con radio button por columna
de marcas)
Nombre de MARCA 1 / Seleccione modelo Nombre de MARCA 2 / Seleccione modelo
modelo 1 modelo 1
modelo 2 modelo 2
modelo 3 modelo 3
.... ....
Siguiente: (enlace a la siguiente pagina) Ver comparativa de modelos escogidos.

Con este modelo se consigue que el usuario haga una selección basada en sus acciones, es el
usuario el que indica cuando avanzar y cuando no, de tal forma que el controla la recarga de paginas
y no somos nosotros quienes indicamos cuando recargar datos.

Y dentro del caso de todo auto, no seria mejor hacer una selección previa en la que indiquemos que
tipo de modelo queremos comparar? es decir, 4x4, turismos, etc... que sentido tiene comparar un
4x4 con un BMW descapotable...?


Luego hay algunas paginas web, sobre todo aquellas que ofrecen operativa de algún tipo (véase
webmail, bancos, tiendas, etc...) en muchos casos se hace necesario que el usuario haga algún tipo
de selección múltiple de datos.

Esta selección múltiple por lo general hace referencia a opciones cerradas (ciudad de residencia,
año de nacimiento, etc) que pueden afectar al resto de la pagina. Por ejemplo si quiero abrir una
cuenta en un banco si pongo como año de nacimiento 1998, no me dejara acceder por que se
supone que debo ser mayor de 18 para acceder.

Este tipo de operativa es correcta siempre y cuando no hagamos que estos combos sean operativos
sin que el usuario lo indique.
Esto quiere decir, si al elegir la fecha de nacimiento vas a recargar la pagina para validar la fecha,
avísamelo.

Que se recomienda en estos casos:
 Procurar agrupar los datos a validar.
 Que el usuario sepa antes de introducir datos, cuales son los márgenes de rechazo (mayor de 18,
vivir en Cuenca, ser Cura...).
 Que el usuario sea el que indica cuando hacer la validación.

8.-Cabeceras de Portal
Cabeceras de portal = espacio perdido. Resumen:
El usuario suele mirar al centro de la pantalla, por lo que debemos procurar que los elementos
importantes estén así colocados.
Nadie usa tu barra de navegación y nadie mira los banners, procura que ocupen lo menos posible.
Lo que pongas en la barra de navegación que sea útil. Terra incluye el horóscopo en la barra de
navegación, es realmente imprescindible?
La mejor:

MSN ofrece una barra adecuada, se ajusta a las resoluciones mas pequeñas de pantalla y ofrece
todas las herramientas básicas del site. Un buen ejemplo a seguir.

De esta cabecera podemos destacar lo siguiente:
 No se usan iconos para nombrar las zonas con lo que las letras son mas grandes y mas fáciles
de pinchar.
 La separación de elementos esta clara con una línea vertical entre unos y otros, el usuario sabe
dond empieza uno y acaba otro.
 Las opciones presentadas en la barra son los "fundamentales".
 Se indica claramente al usuario donde esta coloreando la zona activa.
 El banner se ha reducido al máximo para evitar perder espacio. Al estilo yahoo!.

A destacar:
La cabecera de CNET esta bien por que ofrece todos los enlaces de su red en un espacio mínimo,
visible y no molesto. Quizás se penalice mucho al usuario con el tamaño del logo. Seria mejor usar
un logo algo mejor, para dejar mas espacio al contenido.

En España:
 Terra imita el estilo MSN, pero es demasiado grande, con explorer 5 en un mac a 800x600 no
entra toda la barra.
A destacar el reducido tamaño, a penalizar el exceso de longitud.
En esta barra podemos ver un adecuado uso de los botones en la parte inferior, estén claramente
separados, sin perder espacio entre ellos.
En la parte superior, los botones se podían mejorar indicando claramente la separación entre ellos y
eliminando los iconos, nadie se los va a aprender.
No deja de ser curioso que el horóscopo este en cabecera... no es eso malgastar el espacio...??

 La cabecera de ya.com es la peor que hemos visto. Demasiado ancha, demasiado larga, un
banner gigante que no sirve para nada, etc... no es un ejemplo a seguir. Al igual que la de terra, la
anchura es superior a 800x600.
En esta cabecera no esta claramente definido el tamaño de los botones, se usan iconos que no
sirven para nada.

 Por ultimo eresmas.com lo mismo. Usa iconos que nos son necesarios, no se ve la separación
entre botones, y son muy pequeños y muchos.

De nuevo resumen sobre cabeceras de portal:
 Incluir solo las opciones fundamentales. Mas de 5 empieza a ser demasiado.
 Que estén claramente definidas. No solo en su significado sino en su representación. El área que
se puede pinchar, donde acaba uno y donde empieza el siguiente, etc...
 Úsalos para indicar la posición relativa del usuario en tu pagina.

9.- Los Usuarios
1. Utiliza enlaces azules y botones del sistema. Ayudan al usuario a reconocer lo que es
pinchable y lo que no.
2. Ofrece al usuario la información necesaria sobre donde esta y a donde puede ir de forma
clara.
3. Ofrece guías al usuario (1, 2 y 3, primero esto, luego aquello, te recomendamos esto).
4. Los elementos que recargan la pagina deben indicarlo claramente.

Ordenados de mas a menos aquellos elementos que claramente indican acción de pinchar y
cambiar de pagina.
• Los link en azul y los botones del sistema (no se incluyen combos).
• Los links en otro color que no sea azul, pierden parte de la llamada de enlace.
• Los botones que no son del sistema. La pestaña quizás sea el ejemplo mas extendido pero
hay otras opciones.
• Links sin subrayar que cambian de color o se subrayan al pasar por encima.
• Fotos. El tamaño de la foto ayuda a que se pase por encima y se evidencie la opción de
pinchar. Otra opción que ayuda al usuario a pinchar en las imágenes, es el hecho de que
este con borde. Este borde tendrá el mismo color que los links, por lo que ayudara al usuario
a reconocer el enlace.
• Combos. El combo es una herramienta de selección, no de acción. Aun así no se
recomienda ni para hacer selecciones. El combo no es una herramienta recomendable, por
lo general deja al usuario a medias, sin saber muy bien que pasa cuando pincha sobre el. Su
uso se recomienda en formularios u operaciones, pero nunca en navegación.
• Texto o imágenes sin subrayar que no cambian de color.

Con este orden recomendamos que siempre se use enlaces azules y botones del sistema.
Como dice el titulo de esta pagina, el usuario no es tonto, pero tampoco es adivino y será mas fácil
para la navegación si indicamos claramente que elementos tienen enlace y cuales no. Recuerda que
cuanto mas fácil se lo pintes, mas paginas visitara, mas banners vera, mas productos mirara....

Un dato importante a la hora de hacer botones es el tamaño de los mismos, la relación de tamaños
respecto a la pantalla debe ser proporcional ya que ayudaremos al usuario a acertar a la hora de
pinchar.
Otro dato importante es el de evitar los espacios en blanco en la navegación. Procura que los
botones queden claramente contorneados y que este contorno no se rompa. Si pones una imagen y
debajo un texto que explica lo que es, procura que el espacio entre el botón y el texto también sea
clicable.

Ejemplo de botones buenos:

Estos botones ordenados de izquierda a derecha, son un buen ejemplo de como hacer botones que
funcionan.
 El cuadrado proporciona un área mayor de acierto para el usuario.
 El circulo también da una área de acierto, pero es menor y el usuario se suele apoyar en los
contornos.
 Si no pintamos el área de acierto, el usuario tiene que apuntar bien para acertar el botón.

Ejemplo de botonera buena:

 Esta claramente indicado el área donde se puede pinchar.
 El botón indica claramente que se puede pinchar al estar subrayado.
 La separación entre botones es minima evitando así zonas no clicables.
 No se usan iconos, no son útiles, no ayudan y solo quitan espacio.

Hay casos que botones gráficos pesan menos que el código html. Esto es un hecho demostrado que
entre el código y el peso de un gif indexado con 2 colores casi no hay diferencia y además
proporcionamos un área mayor de acierto. Esta opción, solo en caso de que el peso sea menor, solo
se recomienda para elementos fijos de la navegación que el usuario pueda almacenar en su cache
desde la primera pagina.

Cuando usemos enlaces de texto (azules y subrayados) es importante seguir las siguientes
reglas:

 Procura que la palabra enlazada indique claramente el destino.
• Ver biografia. (Correcto)
• Para ver la biografia pincha aquí. (Incorrecto)

Usar el tag de title en los links ayuda a saber que es lo que vamos a ver. Algunos navegadores no lo
leen, pero ayuda y no es incompatible.
• Ver biografía. (Recomendable)

Si el enlace nos dirige a otro servidor, es bueno pintar la dirección.
• Ver biografía (http://dominio.com/biografia/) . (Recomendable)

Otro caso importante es cuando hacemos botones en secuencia (el típico, 1, 2 y 3). Esto es útil y
ayuda al usuario ya que le puede servir de guía y le ayudan a predecir su camino.
Lo que se recomienda en estos casos, es dejar el link abierto es todos los botones y no obligar al
usuario a utilizar o rellenar el paso 1 para ver el paso 2. En muchos formularios se utiliza este
sistema de 1, 2 y 3, pero no se deja ver el contenido del 2 o el 3 hasta que se rellena el 1. Es mejor
si dejamos todos abiertos para que el usuario explore y no encadenemos los pasos obligando al
usuario a utilizar todo el sistema

10.-Los colores y las hojas de estilo
Resumen:
1. Colores que ayudan a navegar.
2. Hojas de estilo (CSS). Ayudan a navegar.

1. Colores que ayudan a navegar.

Las pantallas de ordenador de los usuarios por lo general soportan miles de colores. Es raro
encontrar monitores con 256 colores aunque aun existen algunos y va siendo normal encontrar
monitores con millones de colores.

La selección de "colores básicos" de nuestro site se debe mantener dentro del rango de 256 colores.
Podremos ampliar el rango en elementos no fundamentales (fotos, ilustraciones, etc) pero debemos
asegurarnos que el 100% de la población podrá acceder a nuestro site sin problemas.

A la hora de seleccionar los colores debemos identificar las partes del site.

A. Colores en la Barra de Navegación.
Lo mejor es tener dos colores, para identificar el elemento activo de la barra de navegación y para
identificar los elementos apagados. Es mejor si el elemento activo "avanza" sobre los demás
elementos con lo que colores calidos (rojo, naranja) y saturados se presentaran mas cercanos al
usuario frente a colores fríos (azul y verde) y poco saturados.

B. Colores en los enlaces.

Es recomendable conservar los colores estándar (azul subrayado). Si decides cambiarlo, recuerda lo
siguiente: Los links tienen 2 estados (sin pulsar y pulsado) por lo que tendrás que elegir un color
saturado para el estado sin pulsar y otro menos saturado para el estado pulsado.

 Sin visitar (Link): Es el color de un link antes de ser pulsado. El color azul es el normal.
 Visitado (Vlink): Es el color que presenta un link cuando ha sido pulsado. El violeta (#CC33CC) es
el normal.

Si decidimos cambiar el color de los links procura que el sistema de color que elijas sea similar al
estándar. Teniendo un color brillante para el estado de "no visitado" y un color mas oscuro para los
"enlaces visitados".

Curiosidad: Luego existe el "Alink" que es uno de los misterios del universo microsoft. He
buscado información sobre que es esto, pero ni dentro de microsoft lo explican de forma
clara. El ejemplo que presentan sobre como funciona, en un explorer 5 en mac no funciona.

• Como trabajar con Alinks: msdn.microsoft.com/library/tools/htmlhelp/chm/htalink1.htm.
• Ejemplo de una pagina que usa el Alink:
msdn.microsoft.com/library/tools/htmlhelp/chm/HTalink4.htm.
• Sumario sobre temas relacionados con el Alink:
msdn.microsoft.com/library/tools/htmlhelp/chm/HTAlink.htm.

C. El Color de Fondo.

El texto corrido se lee mejor con fondo claro y texto oscuro. Lo mas recomendable es el fondo blanco
(#FFFFFF) o el amarillo claro (#FFFFCC). Otros colores claros son menos cómodos para leer, pero
si tu site no exige lecturas prolongadas, puedes usarlos para llamar la atención y conseguir una
lectura mas compulsiva.

Para mensajes de alerta lo mejor es usar el fondo rojo (#FF0000) y el texto en blanco (#FFFFFF).
El amarillo y negro es una combinación que llamara la atención pero tiene un significado mas
estático. Por ultimo, no es recomendable la combinación de rojo y negro.

Enlaces de interés sobre los colores y la visión humana.
 Respuestas a preguntas comunes sobre el color..

2. Hojas de estilo.

Las hojas de estilo (CSS), técnicamente, son un documento que define el estilo del site (tipografía y
colores básicamente). Al definir todo el estilo en un único documento actualizaciones y mejoras en el
aspecto del site se simplifican y aceleran.

El documento se coloca en el servidor y se adjunta la llamada <link rel="stylesheet"
href="MiHojaDeEstilo.css"> en todas las paginas web en la parte del <head>

Reglas básicas:
• Es mejor poner los tamaños de las fuentes en tantos por ciento (%) que en absolutos.

• Es mejor enlazar la hoja de estilo por que así el usuario solo se la bajara una vez.
• No borres el subrayado de los enlaces solo por que puedes hacerlo.
• Que tu "estilo" sea por una mejor navegación del site.

A continuación vamos a comentar la hoja de estilo que usamos en este site. Vamos a comentar esta
hoja de estilo por que es sencilla y presenta mas o menos todos los elementos típicos.

body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; background-color: #FFFFFF;}
td { font-family: Arial, Helvetica, sans-serif; font-size: 100%;}

Con estas dos primeras líneas se define la fuente a utilizar en todo el site. Todo el texto que
este en la pagina ira con el estilo definido en el "body" y todo el texto dentro de las tablas ira
definido dentro del "td".

a:hover { color: RED; background-color: #FFFFCC;}
a:link { color: BLUE;}
a:visited { color: purple;}

En estas 3 líneas creamos el estilo de los enlaces. El "a:hover" es el estilo de los enlaces
cuando nos colocamos encima de ellos. Esta opción solo funciona en Explorer, pero es muy
interesante incorporarlo. El "a:link" es el estilo de los links cuando aun no han sido visitados
y "a:visited" es el estilo de los links cuando han sido visitados. Algunos utilizan la opción de
"text-decoration: none" que es para quitarle el subayado a los enlaces. No es recomendable.

.head { font-family: Arial, Helvetica, sans-serif; font-size: 160%;}
.head2 { font-family: Arial, Helvetica, sans-serif; font-size: 120%;}

En estas dos ultimas líneas hemos creado estilos especiales para la cabecera del articulo y
las cabeceras en los párrafo. Para introducir este estilo, podemos poner <font
class="head2">. Como ves el tamaño esta definido en % con lo que el usuario es libre de
aumentar el tamaño de las fuentes en su navegador, pero el documento conservara las
mismas proporciones.


11.-B2B
Resumen:
1. Da antes de pedir información al usuario.
2. Muestra todo lo que tengas antes de pedir registro.
3. Si por motivos de confidencialidad no puedes mostrarlo, haz una demo real con información
simulada.
4. Simplifica el registro.
5. Ofrece contenido de valor.

Breve introducción:

Una serie de noticias ( 1 | 2 ) sobre iniciativas b2b en España despertaron nuestra curiosidad sobre
el sector. El dato mas sorprendente en estas noticias era el importe económico que pensaban
desembolsar para realizar el proyecto. En el caso de BtoBfactory.com (empresa que ha creado E-
difica.com) comentaban que pensaban gastarse 4.000 millones de pesetas de aquí al 2003. En el
caso de Plastia.com, sus creadores pensaban invertir unos 3.000 millones de pesetas en 2 años.

Los portales están bien enfocados. E-difica.com esta dirigido al sector de la inmobiliaria y los de
Plastia.com y Plasticsarea.com están dirigidos al sector de los plásticos.

Desde el punto de vista de la usabilidad y los contenidos presentan algunos problemas que vemos a
continuación.

1. Da antes de pedir información al usuario.
El principal problema de los sites de B2B es que esconden todo el servicio e información tras el
registro. Es bueno mostrar todo el site en abierto, dejando solo bajo registro el tema transaccional.
Con esto conseguimos que el usuario se informe con claridad de todo lo que hay disponible, dándole
motivos para que se registre cuando el quiera.
Los secciones que deberían quedar en abierto son, consultar las subastas antes de pujar, poder
consultar los catálogos de otras tiendas antes de incluir el nuestro y poder buscar en todo el site
antes de registrarse.

En casos como plastia.com la información disponible en abierto se divide en 4 puntos:
1. Presentación: Tenemos una descripción de objetivos, estrategia, ventajas, etc. Básicamente
es texto y diapositivas estilo power point. No vemos pantallas reales, ni datos reales.
2. Servicios: Aquí tenemos una lista de los servicios que se ofrecen agrupados en 3 grandes
áreas (1) servicios generales (2) área funcional y (3) área técnica junto a una descripción de
cada uno. No hay enlaces a pantallas, demos o servicio real.
3. Contacto: Dirección física y formulario para enviar un mail. En el formulario el campo de
"texto libre" esta limitado a 200 caracteres.
4. Colaboradores: Aquí vemos la lista de "partners" que tienen.
Esta presentación no esta mal, pero no enseñan nada del producto real. No sabemos cual es la lista
de empresas vinculadas, directorio de empresas disponible, subastas de material, bolsa de empleo,
comprar un dominio, etc.
Deberíamos recordarle a los amigos de plastia.com que no hace falta poner todos los textos en
grafico y que es mejor el fondo blanco para imprimir las paginas.

Por otro lado tenemos el ejemplo de Verticalia.com que maneja una serie de portales temáticos
dirigidos a diferentes sectores (agricultura, pesca, carne, flores, etc.). En este caso, se muestra toda
la información al usuario antes de acceder, pero ocurre que casi todo esta desierto. Es complejo
encontrar empresas vinculadas, subastas abiertas, catálogos, etc. Si no tenemos contenidos, es
mejor no sacar esas secciones. Aburre mucho navegar por directorios vacíos.

Digamos que verticalia es una de las
mejores en cuanto a usabilidad.
Quizás se echa de menos un acceso
mas contundente a la zona de
catálogos y un buscador en la portada.

2. Muestra todo lo que tengas antes
de pedir registro.
En los sitios de B2B hay dos
escenarios muy claros que debemos
cuidar en la navegación:
1. Soy una empresa que se
quiere dar de alta para figurar
en la base de datos.
2. Soy una empresa que busca
servicios o productos de otras.
Facilita el camino en ambos casos.
Para el caso (A) pinta una ruta clara
para aquellos que simplemente
quieren subir su catalogo al site. Explica como comprimir las fotos, diferentes formatos, longitud de
textos, como se hace un catalogo, etc. Ten en cuenta que no todas las empresas tienen escáner o
fotos de productos. Ofrece opciones de catálogos simplificados (ficha de texto y poco mas).

Para el escenario (B) sencillamente pinta una estructura de directorios a la Yahoo! en la portada y un
buscador. Si tu site tiene secciones vacías, pinta claramente lo que tengas y no hagas perder el
tiempo a la gente buscando en directorios vacíos.

Este es típico ejemplo de directorio a la Yahoo!.
 Básicamente se compone de los directorios de tu site, y se ponen ejemplos de subcategorías por
si el nombre del directorio no es totalmente descriptivo. Estas subcategorías se enlazan y así sirven
como atajos a las zonas mas populares del site.
 El orden de los directorios puede ser alfabético o por relevancia, es mejor el orden de relevancia
cuando tienes pocos elementos (no mas de 10) y alfabético cuando son muchos. De todos modos, si
tienes muchos elementos, crea una zona de "favoritos" y pon los demás en orden alfabético.
 Como complementos apunta aquellas zonas que son nuevas con un (Nuevo) e indica la cantidad
de productos disponibles dentro de cada zona.
 Luego a nivel de estilo, puedes crear el directorio a 1, 2 o 3 columnas, con mas o menos
subdirectorios, etc.
 Ejemplos a seguir a la hora de presentar el "mercado": WorldBid.com y B2B.yahoo.com.

3. Si por motivos de confidencialidad no puedes mostrarlo, haz una demo real con
información simulada.
Todos sabemos que hacer demos en un rollo, pero si no hay otra forma de ver el producto antes de
registrarse, será necesario que te hagas una. La forma mas sencilla de hacerse una demo es coger
el site, hacer pantallazos, y ponerlos en un documento HTML. Procura no escalar las pantallas ya
que harás muy complejo el ver la información ya de por si pequeña.
Si dispones de recursos podrás hacerte una demo "interactiva" explicando que es cada zona de la
web, cada campo, etc. Por lo general estas demos interactivas se hacen con "flash". Solo procura
que no pese demasiado.

4. Simplifica el registro.
Hemos hecho muchos registros dentro del mundo del b2b y todos deberían simplificarse. Por defecto
todo aquello que no sea necesario quítalo. Nunca pidas información que no es obligatoria.

Por lo general el registro es largo y se suelen plantear problemas de localización geográfica.
Sobre el tema de localización geográfica, procura evitar el uso de términos locales (NIF) y si usas
combos para provincias o países, procura contar siempre con la opción de "otro / ninguno".
• En el caso de Campo21.com de los amigos de btobfctory.com en el formulario de registro el
campo de país esta limitado a Argentina y Estados Unidos. Si esto es así, se debería decir
de forma clara en la portada.
• En el caso de Plastia.com en el registro pide forma voluntaria los datos de "CIF" y "CNAE".
Si no son obligatorios quítalos y procura si tu site tiene proyección internacional no uses
terminología local.
• Con el site de Plasticsarea te puedes registrar fácilmente, pero no se ofrecen grandes
diferencias entre estar registrado o no. Básicamente no hay catalogo de productos o
compañías.
• En Constructiva de los amigos BtoBfactory.com el alta es sencilla, pero no se produce un
reconocimiento del usuario en tiempo real. Parece que hay que esperar a que el sistema se
de cuenta de que te has registrado.
• Ya por ultimo en el caso de e-difica.com el alta es algo complejo pese a tener el acceso
siempre presente en modo de pestaña. En un Mac con Netscape y Explorer hubo fallos
técnicos.
• El mejor es el de verticalia.com. Un registro relativamente sencillo y el alta dentro del
sistema es inmediata.

5. Ofrece contenido de valor.
Este ultimo punto es algo mas editorial, pero espero que sea de interés.
Muchos portales b2b se lanzan al aire y reciben cobertura de los medios cuando realmente están
vacíos, funcionan mal y no son útiles. Ejemplos como edifica.com, plastia.com o plasticsarea.com no
mejoran un panorama bastante desolador.

Los emprendedores de este tipo de portales deberían empezar por construir portales dirigidos a
zonas mas o menos conectadas. Creo que en España un portal de B2B de agricultura aun esta lejos
de triunfar. Creo que uno dirigido al sector de ordenadores tendría algo mas de audiencia (cuanta
gente busca desesperadamente el ultimo driver o actualización del sistema).

Luego lo de siempre, busca los lideres: el único ejemplo de "B2B" que funciona bien es el tema de
contratación de personal. Portales tipo Monster.com son lideres dentro del sector de contratación de
personal y llegan a tener muchas visitas. Estos portales de contratación de personal hacen muy
sencillo el alta del producto y permiten buscar en la base de datos y ver toda la información sin
necesidad de registrarse.

Por otro lado lo de ofrecer contenido de valor también va por los buscadores. Deberían mejorar las
paginas indexadas sobre el tema ya que los resultados que ofrecen actualmente dejan mucho que
desear:
• En todos los casos se puso B2B en la casilla de buscar.
• En el buscador de ya.com el primer resultado es una pagina en obras.
• En el caso de eresmas.com solo salen paginas en ingles. Primer resultado.
• En el caso de terra.es el primer resultado es una pagina que no funciona.
• Los amigos de yahoo.es lo hacen algo mejor ofreciendo una lista de 10 categorías de sitios
de B2B.

12.-Enlaces en nuestras Páginas.
Resumen.
1. Ofrece recursos para que la gente pueda crear enlaces a tu site de forma fácil. La precisión
del enlace es vital.
2. Que la gente te ponga un enlace generara mas visitas y hará mas popular tu site.
3. Algunas cosas que debemos evitar cuando creamos enlaces.
4. Información complementaria sobre este articulo.

1. Ofrece recursos para que la gente pueda crear enlaces a tu site de forma fácil.
Poner enlaces a paginas relacionadas con tu "negocio" es una practica saludable que ayuda a que
tu pagina sea mas popular (te puedes convertir en una especie de lanzadera de información) y
ayudara a que otras paginas te enlacen como referencia de información consiguiendo mas visitas.

Poner un enlace no siempre es fácil ya que (a) técnicamente no todo el mundo sabe como hacerlo y
(b) puede ser que la pagina a la que apuntemos no ofrezca información relevante o haya dejado de
existir.

A la hora de poner un enlace debemos ser capaces de seleccionar con precisión la pagina a la que
apuntamos de tal forma que si pongo un enlace a un articulo de interés debemos evitar el apuntar a
la portada del Magazine (obtendremos imagen de fiabilidad si la gente encuentre la cosas con
rapidez).

Por esta misma razón, en nuestro site, debemos ser capaces de ofrecer paginas "robustas" que no
caducan y no se mueven. Si nuestro site ofrece estabilidad se convertirá en una fuente de referencia
donde la gente podrá ir a consultar información por que "siempre esta disponible".

Nota: Personalmente deje de hacer enlaces a Cinco Días por que caducaban
frecuentemente y no presentan pagina de error (si un enlace esta mal, aparece la portada
del periódico).
Si por cualquier razón las paginas que aparecen en nuestro site tienen caducidad, debemos avisarlo
para que la gente sea consciente de este hecho. No hay nada mas doloroso que poner un enlace a
una pagina que no existe (nuestro site es el que pierde).

Alerta del NYT sobre la caducidad de las paginas

Los recursos que se pueden ofrecer para que la gente ponga enlaces pueden ser los típicos
logos con el código HTML listo para "copiar y pegar" o cosas mas imaginativas como "buscadores",
juegos, banners, etc.

• En este ejemplo de Yahoo!, podemos ver como se presenta la imagen con el link mas el
código html listo para copiar y pegar dentro de nuestra pagina.


• Amazon también ofrece un amplio catalogo de logos y botones listos para "copiar y pegar"
en nuestra pagina.

La precisión del enlace unido a un buen diseño pueden hacer que la gente lo vea atractivo.

2. Que la gente te ponga un enlace generara mas visitas y hará mas popular tu site.
Para decir esto no hace falta ser un genio, pero para llevarlo a buen termino aquí van algunos
consejos prácticos.

• Busca las paginas relacionadas con tu sector. Entra en un buscador popular y pon el
termino(s) que mejor definan tu site.
• Entra en las paginas que encuentres y mira lo que hacen. Aquellas que veas interesantes
pon un enlace a su site (procurando apuntar a una pagina o información relevante).
• Envíales un mail comentando que tu tienes una pagina, que la visiten y si lo ven interesante
que te pongan un enlace (aquí el "quid pro quo" no siempre tiene por que salir bien).
• El siguiente paso es escribir a medios tradicionales (revistas, periódicos, radios)
especializados o cercanos al sector, haciéndoles llegar la existencia de nuestra pagina.
Debemos procurar comunicar al menos una ventaja de visitar nuestro site (información,
herramientas, compra) para que podamos optar a ser mencionados.
• Luego hay que procurar ser constante y mantener esta practica de forma cíclica. Al menos
cada trimestre, procurar dar una vuelta por Internet y ver que paginas nuevas existen y de
nuevo hacerles llegar nuestro site, poner un enlace nuevo y enviar mails.
3. Algunas cosas que debemos evitar cuando creamos enlaces.
Esta lista es breve pero básica para mantener en buena forma nuestros enlaces.
• Cuando pongas un enlace a una pagina externa avísalo. Una forma sencilla es ponerlos
debajo de la categoría de "enlaces de interés". También puedes poner algo del tipo (externo)
junto al enlace, pero lo mas sencillo es poner en el enlace el dominio del site, de esta forma
la gente entenderá que se dirige a otro dominio (ejemplo: ver articulo en el NYT.com).
• Procura abrir esos enlaces sobre tu propio navegador. Si lo abres en otra ventana indícalo.
• Nunca abras una pagina externa dentro de tus frames. Esto puede llegar a ser ilegal en
algunos casos.
• Ofrece un breve comentario sobre el enlace indicando por que lo has puesto, que se puede
encontrar allí, etc.
• Procura revisar los enlaces en tu site para evitar perdidas. Si un enlace en tu site falla, la

culpa es tuya.
Menos es mas. Ten esto presente a la hora de seleccionar los enlaces para tu web site. Ofrece
contenido de valor, enlaces precisos e información relevante. Mucha gente se frustra en Internet por
no encontrar información de valor.

4. Información complementaria sobre este articulo.
Hace unos días vio un articulo que contaba lo siguiente:"... la mayoría de las visitas no proceden
del portal ... "

1999 1998

Portales 33% 44%

Otras paginas y
67% 56%
bookmarks

Fuente: eastgate.com

El autor de este articulo decía que ante esto el futuro del banner en portales, como medio de atraer
audiencia, es cuestionable ya que muy poca audiencia viene por estos medios si lo comparamos con
la audiencia global.

Ante este articulo me surgieron dos opiniones.
1. Si viéramos el camino de un usuario hasta nuestro site, puede ser que realmente el 70% de
las visitas ocurran por un link casual. Pero lo que ofrece este articulo no es una solución,
sino un nuevo problema.

Si la gente llega a mi pagina por otras vías (que no son el portal), como hago para
promocionar mi site y conseguir audiencia? La respuesta es "relaciones publicas" y en
Internet tiene un formato muy simple: pon un link.
2. Ante esta practica perdida (pon un link) esta surgiendo una nueva practica que es "te pago
por poner un link". Aquí podemos ver dos casos.
o Gomez.com (una buena fuente de información) ofrece varias formulas de conseguir
dinero por poner links o "asociaciones".
o About.com hace algo similar.

13.- Navegadores usables.
Resumen.
1. El menú es una lacra de la usabilidad. Procura crear una navegación mas fluida a través de
(a) buenos contenidos, (b) directorios y (c) buscadores bien indexados.
2. Procura evitar un menú con muchas opciones (mas de 5 puede ser mucho).
3. Es bueno indicar al usuario "donde esta", pero no es necesario desactivar esa opción.
4. Los colores de enlace "nuevo", "over" y "visitado" deben ser del mismo color pero con
diferentes tonalidades. No uses diferentes colores para cada estatus.
5. Si el menú se despliega, procura abrir una pagina por defecto y mantén el menú desplegado
(no lo cierres sin que el usuario lo haya dicho).
6. El uso de los "bullets" es necesario cuando tenemos opciones que ocupan 2 líneas de texto.

1. Procura evitar un menú con muchas opciones (mas de 5 puede ser mucho).
Si los menús de navegación son una de las lacras de la usabilidad, debemos procurar diseñarlos
(forma y función) lo mejor posible para evitar errores y aliviar la navegación a nuestros usuarios.

Una regla básica es eliminar opciones. No hagas menús muy extensos. Mas de 5 opciones son
muchas para leer, entender y pinchar. Reduce el numero al máximo y procura que lo que pongas en
el menú tenga una importancia real. Es mejor que una opción del menú agrupe diferentes apartados
que tener un menú con muchas opciones "simples". El ejemplo que nos puede sonar es el de
agrupar las FAQ, Oficinas, Mapa, Carta del Presidente, Memoria Anual, Historia de la Compaña en
una opción que ponga "Todo sobre Nosotros". Eliminamos opciones y no perdemos accesibilidad.

Si existe una necesidad real de tener muchas opciones, procura usar un directorio y ponlo en el
medio de la pagina. La gente encontrara las cosas mas rápido y el menú no se perderá por debajo
de la línea de scroll.
El ejemplo mas practico es en las tiendas donde la barra de "departamentos" suele extenderse hasta
mas allá del pixel 768. Es mejor poner los departamentos relacionados con la categoría donde se
encuentra el usuario y una opción de "ver todos los departamentos".

2. Es bueno indicar donde esta el usuario, pero no es necesario desactivar esa opción.
Una practica habitual en los menús es desactivar la opción donde se encuentra el usuario para
indicar de una forma clara "donde estoy".
Si bien es una buena practica, tiene algunos inconvenientes:
• El usuario no puede volver a pinchar sobre esta opción si se siente perdido.
• Debemos procurar usar enlaces subrayados para hacer mas evidente la diferencia. Si los
enlaces no están subrayados, es difícil apreciar la diferencia.
Es recomendable dejar los botones del menú siempre activos y procurar usar la pagina en si para
mostrar al usuario la información de "donde estoy". Si queremos usar el menú para indicar al usuario
"donde estoy", es mejor usar algún elemento grafico en el menú que indique esa diferencia.

3. Los colores de enlace "nuevo", "over" y "visitado" deben ser del mismo color pero con
diferentes tonalidades.
Las CSS nos permiten manejar con soltura el estilo de nuestro site incluyendo los eventos de enlace
"nuevo", "visitado" y (en algunos casos) el evento de "over".

Si bien los códigos de color son complejos de entender y la mayoría de los usuario ni siquiera llegan
a recibir el mensaje, es bueno usarlos para aquellos usuarios mas avanzados que requieran de mas
información por parte de nuestra web.

La regla general que debemos aplicar es usar un único color para los enlaces, y 3 tonos para los
diferentes eventos. Tendremos un color X (azul es la norma) para los enlaces y un tono mas brillante
para el evento de "over" y un tono mas apagado para el enlace visitado. Otra variante para el "over"

es usar un color que aparecerá en el fondo de la zona enlazada.

Ejemplo de diferentes estilos de enlaces.

En la imagen inferior, podemos ver ejemplos
de eventos en un enlace.
El ejemplo A, donde usamos un único color y
3 tonos diferentes, es el recomendable frente
al ejemplo B donde no se usa el subrayado y
el color del enlace cambia a cada evento.

Usa colores diferentes si deseas indicar diferentes tipos de enlaces (internos, externos, acceso a
diferentes áreas, etc...)
No hagas del evento "over" una fiesta y procura evitar las metamorfosis a "bold", aparece el
"subrayado", etc.

4. Si el menú se despliega, procura abrir una pagina por defecto y mantén el menú
desplegado (no lo cierres sin que el usuario lo haya dicho).
Otra lacra de la usabilidad son los menús que se despliegan. No los uses. Es mejor navegar a través
de paginas donde el usuario ve resultados, y se informa de cuales son las siguientes opciones a ver.
Si el usuario se pierde volverá a la "home" o pulsara el botón de "volver" (si ya sabe navegar puede
que incluso use la barra de "donde estoy".

Si por motivos de fuerza mayor los tienes que usar, procura seguir un par de reglas.
• No uses menús con rollover. Esta probado que el usuario se siente mas cómodo si pincha y
el menú se abre.
• Los menús se abren y se cierran si el usuario lo indica. Si por razones de espacio tienes que
cerrar un menú cuando se abre otro, reduce el numero de opciones.
• Muchas veces, tenemos un menú llamado "Coches". Si pinchamos sobre esta opción el
menú se despliega con las opciones de "Deportivos, 4x4, etc..". Es bueno si además de
desplegar el menú, abrimos una pagina donde explicamos las opciones mas comunes de
esa pagina y/o destacamos algún producto. Además de ayudar al usuario a manejar el
menú, podemos acercar opciones comunes dentro de esa zona del tipo "ultimas
novedades", "buscador", "productos mas demandados".

5. El uso de los "bullets" es necesario cuando tenemos opciones que ocupan 2 líneas
de texto.
Si tu menú se compone únicamente de texto, procura que quede claro donde empieza y
donde acaba cada opción. Para ello el uso de "bullets" será lo mas adecuado. Es
recomendable usar los bullets del sistema para aliviar el peso de la pagina.

Ejemplo de menús con y sin "bullets".

Usando los bullets en un menú ayudamos a separar las opciones y el usuario entiende donde empieza
y donde acaba cada opción.

Imagen tomada de amazon.com


En un menú sin bullets es mas complejo separar las opciones y cuesta ver donde empieza y acaba
cada enlace.

14.- Peso del site.
Resumen.
1. Paginas mas ligeras incrementan el numero de paginas vistas.
2. Elimina las imágenes. Elimina los banners de autopromoción (no dan beneficios).
3. Aprovecha todo lo que el sistema operativo te ofrece (botones, colores, tablas, tipografías).
4. Se flexible con las limitaciones del html.
Reduce el peso de tu site.
Reducir el peso de un site en un 20% equivale a incrementar en un 20% el numero de paginas
vistas. El peso de las paginas es un lastre que hace que el numero de paginas vistas se reduzca por
sesión de usuario.

Total peso / velocidad de En una sesión de
Peso de las paginas
conexión 30segs

30kbs de html + 20kbs de
Site A 50kbs / 5kbs/seg bajan 3 paginas.
imágenes

15kbs de html + 10kbs de
Site B 25kbs / 5kbs/seg bajan 6 paginas.
imágenes

Tomando como constantes el tiempo de conexión y la velocidad de descarga, la variable donde un
site puede tomar ventaja para servir mas paginas es reduciendo el peso. Reduciendo el peso
podemos hacer que el usuario se baje mas información en el mismo tiempo de conexión.

El reducir el peso de las paginas no tiene por que requerir cambios dramáticos. Conseguir una
reducción del 10-20% del peso global del site puede suponer un gran adelanto respecto a la
competencia.

En un site donde las paginas bajan con rapidez no da pereza pinchar en los botones.
No solo se trata de cuidar a los usuarios con modem. Si las paginas pesan poco y la respuesta de la
web a las peticiones del usuario es rápida y ágil, no da pereza seguir pinchando para comprobar
datos y recoger mas información.
Si el site pesa y cada petición exige un tiempo de carga, el usuario se desanima y parara de pedir
información con lo que no finalizara su labor de forma satisfactoria.

En Internet que un sistema responda de forma rápida es vital para trasmitir valores de calidad,
confianza y seguridad.

Es mejor crear 3 paginas de 10kbs que 1 de 30kbs.
En internet cuenta mas el acceder a información precisa que a mucha información. Ofrecer paginas
ligeras donde el usuario pueda tomar decisiones rápidas sobre avanzar o retroceder es vital. El
camino hacia la información final (donde si podremos crear paginas mas completas) debe estar
compuesto de paginas simples que ofrezcan rutas claras. El ofrecer todas las rutas no ayuda a
tomar una decisión. Es mejor ofrecer una pagina sencilla y que sea el usuario el que tome la
decisión de seguir o retroceder, pero no le intentes enganchar ofreciendo muchas opciones (solo le
aturdirás).

La regla básica para crear paginas de 10kbs es evitar ponerlo todo en cada pagina. Muchos sites
"arrastran" los menús de navegación de todo el site en todas las paginas cuando por lo general
indicar la posición del usuario en el site junto a un botón de "home" y un buscador resuelven todas
las dudas.

Elimina el grafismo. Esto incluye los banners de autopromoción.
El único grafico necesario es el logo de tu site. Si es relevante, incluye fotografías del producto,
noticias o ilustraciones de la actividad.

No pongas banners de autopromoción. Si tu site incluye banners, procura ponerlos solo cuando
tengas un patrocinador real. Si no lo tienes evita poner banners internos. Están incrementando el
peso de la pagina, su utilidad es mas o menos nula y están creando ceguera en el usuario.

El problema de los gráficos es doble. El peso suele ser alto y generan una conexión con el servidor
que suele retrasar el envío del resto de información. Procura usar los gráficos esenciales. Cuanto
menos pese tu pagina mas satisfecho estará tu usuario.

Aprovecha lo que el sistema te da.
Botones, tablas, paleta de colores, tipografías, menús desplegables. El sistema operativo te ofrece
una gran cantidad de herramientas que sabiendo combinar te pueden ayudar a sustituir gran parte
del grafismo de tu site.

Las tipografías que ofrece el sistema son limitadas pero mas que suficientes para crear titulares,
botones, etc. No uses imágenes para crear "solo títulos".

Las tablas y los colores del sistema suelen ser mas que suficientes para crear todo tipo de
botoneras, lay-outs. La austeridad de este estilo se puede enriquecer con gráficos bien
seleccionados y fotos.

Procura utilizar todo lo que el html crea por defecto como las listas y bullets. El querer cambiar el
sistema solo genera paginas mas lentas, nadie va a apreciar la mejora si al final el site va mas lento.
Concentra las fuerzas en ofrecer contenido de calidad y en crear herramientas que funcionen mas
rápido.

Se flexible con las limitaciones del html.
El principal motivo por el que las paginas bajan despacio es por que los diseñadores (gráficos y
programadores) de las paginas, pretenden imponer su "estilo de diseño" a un soporte que tiene
ciertas características.

La precisión del html es algo ruda en cuanto al manejo de tipografía, párrafos, márgenes y
justificaciones, pero es mejor saber moverse con agilidad dentro de estos limites que imponer a base
de código y gráficos unos limites que no mejoran el funcionamiento del site.

Se flexible con la herramienta y todo funcionara de forma mas rápida.

15.-Páginas fluidas.
Resumen.
1. Paginas fluidas: definición.
2. Para noticias y texto puede ser valido el tener pagina que se redimensionan.
3. Para aplicaciones "web" es mejor usar tamaños fijos.

1. Paginas fluidas: definición.
Dentro del esquema general de una pagina web existen varias opciones:
• Que la pagina este centrada o justificada a la izquierda.
• Que la pagina tenga un tamaño fijo o se adapte al tamaño del navegador.
Cuando el tamaño de la pagina se adapta a las dimensiones del navegador tenemos una pagina
fluida. Esta adaptación se consigue haciendo las tablas que componen nuestra pagina con tamaños
relativos (%).

Amazon.com es una pagina fluida que se puede seguir como ejemplo.

2. Para noticias y texto intensivo es mejor el usar paginas fluidas.
Para paginas con texto y noticias es mejor el crear nuestras paginas "fluidas" ya que no
perjudicamos la navegación en resoluciones de monitor bajas (640x480) y si aprovechamos el uso
de monitores con mayor resolución al ofrecer mas información en la parte superior (menos scroll).

3. Para aplicaciones "web" es mejor usar tamaños fijos.
En el caso de aplicaciones "web" tipo "web mail", "carrito de la compra" y formularios, es mejor usar
paginas con tamaño fijo ya que en monitores con resolución de pantalla superior a 1024 la distancia
entre la información y los botones es muy grande y se pierda el contexto (botones situados en el
margen derecho y el campo de texto en el margen izquierdo).

Esto no evita que podamos tener la pagina construida con zonas "fluidas" y zonas rígidas. Dentro de
una misma pagina, zonas de botones y navegación es bueno conservar el tamaño fijo y zonas de
información es mejor ofrecer una solución "fluida".

El inconveniente de usar tamaños "fluidos" es que el navegador Netscape tarda mas en pintar la
información.

16.-Página de error.
Resumen.
1. Esta pagina existe.
2. Identifica claramente el error y explica por que se ha podido producir.
3. Ofrece soluciones relevantes y procura corregirlos.

1. La pagina de error existe.
Motivos mas comunes por los que un site da como respuesta al usuario una pagina de error.
• Enlace roto. Este error no tiene justificación. Se debe corregir.
• Paginas que caducan o se mueven. Este error no tiene justificación y se debe identificar y
corregir.
• Al escribir o copiar una URL. Este error se puede controlar ofreciendo URL sencillas y
consistentes.
• Entrada de datos en un formulario.
• Búsqueda que no ofrece resultados. Este error no se puede controlar, pero se debe
identificar claramente.
• Sesión expirada. Este error se da cuando la pagina pedida se encuentra bajo un servidor
seguro o dentro de la sesión de un usuario. Si la sesión finalizo se debe volver a introducir el
nombre de usuario y contraseña. Este error se debe identificar y explicar claramente.
Estos errores no siempre están bajo nuestro control, con lo que siempre se debe crear la pagina
error.

Como mínimo esta pagina debe contener una explicación breve del motivo posible del error junto al
logo de la pagina y enlaces a la portada, mapa del web, ayuda, etc.

Crear una pagina de error "genérica" para todos los errores no es recomendable. Algunos errores no
están bajo nuestro control y esto debe quedar claro al usuario. De igual forma hay errores
irreversibles que el usuario debe entender que no tendrán solución (información borrada por
ejemplo).

Identificando los errores y creando paginas especificas se puede ayudar al usuario a continuar con
su camino y el site podrá tener un registro de "paginas de error mas visitadas" con lo que se podrán
identificar mas fácilmente donde falla el site.

2. Identifica claramente el error y explica por que se ha podido producir.
En algunos casos identificar el error y ofrecer la solución es sencillo. El típico caso del "error 404",
pagina no encontrada se resuelve poniendo una pagina con un texto del estilo "pagina no
encontrada en nuestro servidor" y los botones de, portada, mapa, secciones principales, ayuda y
mail.

La pagina de error debe tener el mismo "template" que el resto del site pero se debe informar
claramente de que ha habido un error. Si la pagina no ofrece claramente esta información, el usuario
se puede encontrar ante una pagina demasiado ambigua y sentirse perdido.

Los errores de escribir o copiar un URL son difíciles de controlar. Este problema suele venir por la
trasmisión de direcciones por via impresa o vocal. Si alguien tiene que escribir una URL copiando la
dirección desde la pagina de publicidad de una revista, es normal que se produzcan errores. Este
error es de difícil detección ya que suele equivaler a un "404" pagina no encontrada. De nuevo,
procura mantener un "template" uniforme, explica lo que ha podido pasar y pon enlaces a la portada
y demás.

El error de pagina movida o caducada tiene varios remedios. Si vas a mover tu site de servidor y
URL, procura hacerlo de forma gradual de tal forma que los usuarios no sientan la diferencia.

Procura mantener las paginas el máximo tiempo posible en ambos servidores de tal forma que
bookmarks y buscadores te sigan reportando usuarios. Lo que debes hacer es en las paginas viejas
cambiar los enlaces por los de las paginas nuevas de tal forma que el usuario que accede a tu site
por un bookmark, se traslade sin problemas.

Si en tu site las paginas caducan o se mueven, procura explicarlo de forma razonable en la pagina
de error. Si no puedes justificar el error de forma razonable, deberías pensar en remediar el
problema.

Los errores de entrada de datos en un formulario es algo mas complejo y exige analizar cada
campo del formulario y entender que se esta pidiendo, que datos puede introducir un usuario y que
es lo que queremos que ponga.

Una forma sencilla de resolver este tipo de errores en ofrecer ejemplos del tipo de datos que
queremos que ponga en la casilla, si nos referimos a un numero de teléfono es bueno indicar el
numero de cifras mínimo, indicar posibles limitaciones (no móviles), y posibles excepciones (indique
aquí su extensión).
Ejemplo de entrada de datos.

Numero Ext
de (opcional)
teléfono: :

Incluir el prefijo provincial.
No teléfonos móviles (celulares).

Para ofrecer la explicación sobre errores en un formulario, se devuelve la misma pagina del
formulario con un encabezado donde se indica claramente los errores que se han producido y se
ofrecen ayudas generales. Se suelen pintar los campos erróneos con un color "llamativo" de tal
forma que el usuario sea capaz de escanear rápidamente el formulario.

La solución menos convencional de poner alertas del sistema para corregir errores en un formulario
tiene estos inconvenientes:
• La alerta no esta unida "físicamente" al formulario con lo que es difícil entender la conexión.
• La alerta del sistema no ofrece interactividad con la pagina con lo que el mensaje de error es
pasivo. Una alerta dentro de la pagina web puede ofrecer enlaces a secciones de ayuda,
seguridad, etc.

Recomendable seguir el estándar de crear un encabezado dentro del formulario donde se resumen
los errores y se ofrece ayuda relevante.

El error de buscador que no encuentra nada se puede corregir haciendo un seguimiento de los
"términos" que la gente introduce en nuestro buscador.

La pagina de error genérica de este caso debe ayudar al usuario a buscar.
• Si el buscador es ortográficamente correcto se debe indicar para que el usuario lo entienda,
pero se ha de saber que esto es algo que se debe corregir haciendo que el buscador
encuentro palabras independientemente de su ortografía (acentos y eñes no están
disponibles en todos los teclados).
• Si el buscador es capaz de encontrar las cosas por códigos mas precisos que el "nombre"
se debe indicar. En el caso de la bolsa, el ticker de la compañía es mas preciso, en el caso
de libros el código ISDN es mas preciso. Si no es capaz de buscar por términos precisos,

Usabilidad Temari

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (20)

Similar to Usabilidad Temari

Similar to Usabilidad Temari (20)

More from Digital Granollers

More from Digital Granollers (20)

Recently uploaded

Recently uploaded (20)

Usabilidad Temari